<template>
    <view class="setting-container">
        <!-- 设置列表 -->
        <view class="setting-list">
            <view class="setting-item" @tap="goToChangePassword">
                <text class="item-text">修改密码</text>
                <text class="iconfont icon-right"></text>
            </view>

            <view class="setting-item" @tap="goToFeedback">
                <text class="item-text">提交反馈</text>
                <text class="iconfont icon-right"></text>
            </view>

            <view class="setting-item">
                <text class="item-text">版本</text>
                <text class="version-text">v1.0.0</text>
            </view>
        </view>

        <!-- 退出登录按钮 -->
        <view class="logout-btn-wrap">
            <button class="logout-btn" @tap="handleLogout">退出登录</button>
        </view>
    </view>
</template>

<script setup>
import { useUserStore } from '@/store';
import { useCartStore } from '@/store/modules/cart';

const userStore = useUserStore();
const cartStore = useCartStore();

// 跳转到修改密码页面
const goToChangePassword = () => {
    uni.navigateTo({
        url: '/pages/change-password/change-password'
    });
};

// 跳转到反馈页面
const goToFeedback = () => {
    uni.navigateTo({
        url: '/pages/feedback/feedback'
    });
};

// 退出登录
const handleLogout = () => {
    uni.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        success: (res) => {
            if (res.confirm) {
                // 清除用户数据
                userStore.clearUserData();
                // 清除购物车
                cartStore.clearCart();
                // 清除选中的地址
                cartStore.clearTemporaryAddress();
                // 清除地址
                userStore.clearAddress();
                // 清除历史记录
                cartStore.clearHistory();
                // 返回首页
                uni.switchTab({
                    url: '/pages/index/index'
                });
            }
        }
    });
};
</script>

<style lang="scss" scoped>
.setting-container {
    min-height: 100vh;
    background-color: #f5f5f5;
    padding: 20rpx;

    .setting-list {
        background-color: #fff;
        border-radius: 16rpx;
        overflow: hidden;

        .setting-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 30rpx 20rpx;
            border-bottom: 1rpx solid #f5f5f5;

            &:last-child {
                border-bottom: none;
            }

            &:active {
                background-color: #f9f9f9;
            }

            .item-text {
                font-size: 28rpx;
                color: #333;
            }

            .version-text {
                font-size: 28rpx;
                color: #999;
            }

            .iconfont {
                font-size: 28rpx;
                color: #999;
            }
        }
    }

    .logout-btn-wrap {
        margin-top: 40rpx;
        padding: 0 20rpx;

        .logout-btn {
            width: 100%;
            height: 88rpx;
            line-height: 88rpx;
            background-color: #ff4d4f;
            color: #fff;
            font-size: 32rpx;
            border-radius: 44rpx;
            border: none;

            &:active {
                opacity: 0.9;
            }

            &::after {
                border: none;
            }
        }
    }
}
</style>